<template>
  <el-tag 
    :type="getStatusType(status)" 
    :effect="effect"
    :size="size"
    class="customer-status-badge"
  >
    <el-icon v-if="showIcon" class="status-icon">
      <component :is="getStatusIcon(status)" />
    </el-icon>
    {{ getStatusText(status) }}
  </el-tag>
</template>

<script setup lang="ts">
import { Check, Warning, CircleClose, InfoFilled } from '@element-plus/icons-vue'

interface Props {
  status: string
  size?: 'small' | 'large' | 'default'
  effect?: 'dark' | 'light' | 'plain'
  showIcon?: boolean
}

withDefaults(defineProps<Props>(), {
  size: 'default',
  effect: 'light',
  showIcon: true
})

const getStatusType = (status: string) => {
  const typeMap: Record<string, any> = {
    active: 'success',
    inactive: 'info',
    risk: 'warning',
    blacklist: 'danger'
  }
  return typeMap[status] || 'info'
}

const getStatusIcon = (status: string) => {
  const iconMap: Record<string, any> = {
    active: Check,
    inactive: InfoFilled,
    risk: Warning,
    blacklist: CircleClose
  }
  return iconMap[status] || InfoFilled
}

const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    active: '活跃',
    inactive: '休眠',
    risk: '风险',
    blacklist: '黑名单'
  }
  return textMap[status] || status
}
</script>

<style scoped lang="scss">
.customer-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  
  .status-icon {
    font-size: 12px;
  }
}
</style>